<template>
  <div class="selectGrade_index">
    <div class="content inner">
      <steps :step="3" :revise="isEditInfos" :editTitle="editTitle"></steps>
      <div class="reporting-main module">
        <div class="hd">
          <div class="alert-title">
            【入学类型：<span>{{ alertTitle }}</span
            >】 如果入学类型错误，请注销账号后重新注册报名
          </div>
        </div>
        <div class="bd">
          <div class="selNote" v-if="selNote">
            <el-alert type="error" class="stud-tips">
              <template slot="title">
                <div>{{ selNote }}</div>
              </template>
            </el-alert>
          </div>
          <div class="nav_title"><span>年级选择</span></div>
          <div class="selection-grade">
            <div class="selection-bd">
              <el-button
                v-for="item in gradeList"
                :key="item.code"
                @click="selectGrade(item.code)"
                :class="{ active: item.code == grade }"
                >{{ item.text }}</el-button
              >
            </div>
          </div>
          <div class="selection-form">
            <div class="list-hd">
              <h3 class="title">报名信息</h3>
            </div>
            <div class="list-bd">
              <el-form
                :inline="true"
                :model="ruleForm"
                :rules="rules"
                ref="ruleForm"
                label-width="145px"
              >
                <el-row v-if="isShowSchool">
                  <el-form-item
                    label="原就读学校："
                    prop="lastSchool"
                    style="width: calc(50% - 10px)"
                  >
                    <el-input
                      v-if="lastSchoolInput"
                      v-model.trim="ruleForm.lastSchool"
                      placeholder="请输入原就读学校名称"
                      style="width: 100%"
                      ref="schoolInput"
                    >
                      <i
                        slot="suffix"
                        class="el-input__icon el-icon-arrow-down"
                        @click="lastSchoolInput = false"
                      ></i>
                    </el-input>
                    <el-select
                      v-else
                      v-model="ruleForm.lastSchool"
                      placeholder="请选择原就读学校名称"
                      style="width: 100%"
                      @change="changeInput"
                    >
                      <el-option label="其他" value="其他"></el-option>
                      <el-option
                        v-for="item in schoolList"
                        :key="item.id"
                        :label="item.SchoolName"
                        :value="item.schoolName"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item
                    label="学籍号："
                    prop="studentNo"
                    style="width: calc(50% - 10px)"
                    :class="{ itemtel: !isShowStudNO }"
                  >
                    <el-input
                      v-model.trim="ruleForm.studentNo"
                      placeholder="请输入学籍号"
                      @blur="showStudNo"
                    >
                    </el-input>
                    <p v-if="isShowStudNO">
                      学籍号以“G”或“L”开头（字母大写, 19位）
                    </p>
                  </el-form-item>
                </el-row>
                <el-form-item
                  label="是否捆绑派位："
                  prop=""
                  style="width: calc(50% - 10px)"
                >
                  <el-radio-group
                    v-model="ruleForm.isBind"
                    @change="onSelectIsBindChoice"
                  >
                    <el-radio label="1">是</el-radio>
                    <el-radio label="0">否</el-radio>
                  </el-radio-group>
                </el-form-item>
                <el-form-item
                  label="被捆绑学生身份证号："
                  style="width: calc(50% - 10px)"
                  class="bindId"
                >
                  <el-input
                    v-model.trim="ruleForm.bindIdno"
                    placeholder="请输入身份证号"
                    :disabled="ruleForm.isBind == '0'"
                  >
                  </el-input>
                </el-form-item>
              </el-form>
            </div>
          </div>

          <div class="reporting-btn" v-if="verify.res != -1">
            <router-link
              v-if="!isEditInfos"
              class="el-button el-button--small"
              :to="{ path: '/signup' }"
              >上一步</router-link
            >
            <el-button
              style="margin-left: 20px"
              type="primary"
              @click="onSubmit"
              size="small"
              :class="{ disabled: verify.res != 0 }"
              >{{ isEditInfos ? "确认修改" : "提交报名" }}</el-button
            >
          </div>
          <div class="no-edit" v-else>
            <i class="el-icon-warning warning"></i>{{ verify.msg }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import Steps from "../components/Steps";
// import Notice from "../components/Notice";
import {
  getVerify,
  getSysCode,
  getStudInfo,
  submitStudSelection,
  getStudSelection,
} from "../utils/api";
export default {
  name: "selectgrade",
  components: {
    Steps,
    // Notice
  },
  data() {
    return {
      isEditInfos: false, //是否是修改页面
      editTitle: "", //编辑页面标题
      isSubmit: true, //是否可以提交
      ruleForm: {
        lastSchool: "",
        studentNo: "",
        isBind: "",
        bindIdno: "",
      },
      rules: {
        lastSchool: [
          { required: true, message: "请输入学校名称", trigger: "change" },
        ],
        studentNo: [
          { required: true, message: "请输入学籍号", trigger: "blur" },
          {
            validator: function (rule, value, callback) {
              const a = value.substring(0, 1);
              if (a != "G" && a != "L") {
                callback(new Error("请以G或L开头"));
              } else if (a == "G" || a == "L") {
                if (value.length != 19) {
                  callback(
                    new Error("学籍号位数不正确!请仔细检查(由19位数组成)")
                  );
                } else {
                  callback();
                }
              } else {
                callback();
              }
            },
            trigger: "blur",
          },
        ],
      },
      gradeList: [],
      schoolList: [],
      grade: 0,
      lastSchoolInput: false, //是否手动输入原就读学校
      isShowSchool: false, //是否显示原就读学校和学籍号
      alertTitle: "",
      selNote: "", //提示信息
      isShowStudNO: true,
    };
  },
  computed: {
    stuList() {
      return this.$store.state.stuList;
    },
    verify() {
      return this.$store.state.verify;
    },
  },
  methods: {
    // 选择年级
    selectGrade(index) {
      let current = this.grade;
      current = index;
      this.grade = current;
      if (index != "1") {
        this.isShowSchool = true;
      } else {
        this.isShowSchool = false;
        this.ruleForm.studentNo = "";
        this.ruleForm.lastSchool = "";
      }
    },
    onSelectIsBindChoice(item) {
      const bindId = document.querySelector(".bindId");
      const errDoc = bindId.querySelector(".el-form-item__error");
      if (item == "0") {
        this.ruleForm.bindIdno = "";
        this.rules.bindIdno = [];
        if (errDoc) {
          errDoc.style.display = "none";
        }
      } else {
        const bindIdNo = [
          {
            required: true,
            message: "请输入身份证号",
            trigger: "blur",
          },
          {
            pattern: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/,
            message: "您的身份证格式不正确",
          },
        ];
        this.rules.bindIdno = bindIdNo;
        if (errDoc) {
          errDoc.style.display = "block";
        }
      }
    },
    // 切换原就读学校输入框
    changeInput(val) {
      if (val == "其他") {
        this.lastSchoolInput = true;
        this.ruleForm.lastSchool = "";
        this.$nextTick(() => {
          this.$refs["schoolInput"].focus();
        });
      }
    },
    //提交报名
    onSubmit() {
      let isSubmit = true;
      this.$refs["ruleForm"].validate(async (valid) => {
        if (valid) {
          if (this.grade == "0") {
            this.$message.error("请选择年级");
            return false;
          }

          if (!this.isSubmit) {
            this.$message.error("请勿重复提交");
            return false;
          }

          let params = this.ruleForm;
          params.gradeCode = this.grade;
          // console.log(params);
          if (isSubmit) {
            const data = await submitStudSelection(params);
            if (data.res == 0) {
              // console.log(data);
              if (this.isEditInfos) {
                this.$message({
                  message: "修改成功",
                  type: "success",
                  duration: 1500,
                });
                setTimeout(() => {
                  this.$router.push({ path: "/results" });
                }, 1500);
              } else {
                this.$router.push({ path: "/results" });
              }
            } else {
              this.$message.error(data.msg);
            }
          }
          this.isSubmit = false;
          setTimeout(() => {
            this.isSubmit = true;
          }, 3000);
          // this.$router.push({ path: "/results" });
        } else {
          this.isShowStudNO = false;
          return false;
        }
      });
    },
    //获取在线报名页数据
    async getRegInfo() {
      try {
        const data = await getStudSelection();
        if (data.res == 0) {
          this.gradeList = data.data.itemList.gradeList;
          this.schoolList = data.data.itemList.schoolList;
          this.selNote = data.data.selNote;
          this.ruleForm.lastSchool = data.data.lastSchool || "";
          this.ruleForm.studentNo = data.data.studentNo || "";
          this.ruleForm.isBind = data.data.isBind || "0";
          this.ruleForm.bindIdno = data.data.bindIdno || "";
          this.grade = data.data.gradeCode || "0";
          if (data.data.gradeCode && data.data.gradeCode != "1") {
            this.isShowSchool = true;
          }
          this.rules.bindIdno = [];
        } else {
          this.$message.error(data.msg);
        }
      } catch (error) {}
    },
    // 获取所有的入学类型
    async getRegType(type) {
      try {
        const data = await getSysCode(type);
        if (data.res == 0) {
          data.data.forEach((item) => {
            if (item.code == this.stuList.regType) {
              this.alertTitle = item.text;
            }
          });
        }
      } catch (error) {}
    },
    // 获取学生信息
    async getStuList() {
      try {
        const data = await getStudInfo();
        if (data.res == 0) {
          this.$store.dispatch("setStuList", data.data.person);
        } else {
          this.$message.error(data.msg);
        }
      } catch (error) {}
    },
    // 判断学生是否可修改信息、注销
    async getVerify() {
      try {
        const data = await getVerify();
        localDb.set("verify", data);
      } catch (error) {}
    },
    showStudNo() {
      this.$refs["ruleForm"].validateField("studentNo", (studentNoError) => {
        if (studentNoError) {
          this.isShowStudNO = false;
        } else {
          this.isShowStudNO = true;
        }
      });
    },
  },
  created() {
    this.getVerify();
    //判断是不是修改页面
    if (this.$route.query.isEditInfos) {
      this.isEditInfos = true;
      this.editTitle = this.$route.query.isEditInfos;
    } else {
      this.isEditInfos = false;
    }
  },
  mounted() {
    this.getRegType("regType1");
    this.getRegInfo();
    this.getStuList();
  },
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.selectGrade_index {
  height: 91vh;
  // background-color: #edf4fa;
  padding-top: 30px;
}
.reporting-main {
  padding: 20px;
  .hd {
    margin-bottom: 20px;
  }
  .selNote {
    margin-bottom: 20px;
  }
  .el-alert {
    padding: 8px 10px;
    height: 40px;
    background-color: #fff5f5;
    border: solid 1px #ffd6d6;
    /deep/ .el-alert__content {
      padding: 0;
      div {
        font-size: 14px;
        color: #ff0000;
      }
      .el-alert__closebtn {
        color: #999;
        font-size: 16px;
      }
    }
  }
}

.selection-grade {
  padding: 30px 0;
  .selection-title {
    line-height: 40px;
    text-align: center;
    font-size: 24px;
    font-weight: normal;
  }
  .selection-bd {
    // padding: 50px 0 0;
    display: flex;
    // justify-content: center;
    flex-wrap: wrap;
    .el-button {
      text-align: center;
      width: 216px;
      height: 36px;
      line-height: 16px;
      margin-bottom: 20px;
      font-size: 16px;
      color: #222;
      background-color: #fff;
      margin-left: 0;
      margin-right: 15px;
      cursor: pointer;
      border: solid 1px #e5e5e5;
      //   &:active,
      //   &:focus {
      //     background-color: #ecf5ff;
      //     color: #0195ff;
      //   }
      &:nth-child(5) {
        margin-right: 0;
      }
    }
    .active {
      background-color: #ecf5ff;
      color: #0195ff;
      border: solid 1px #cceaff;
    }
  }
}
.selection-form {
  // height: 110px;
  // margin-bottom: 30px;
  .list-bd {
    .el-form-item {
      margin-bottom: 0;
      &.itemtel {
        margin-bottom: 12px !important;
      }
      /deep/ .el-form-item__label {
        color: #222;
        width: 150px !important;
        padding-right: 0;
      }
      /deep/ .el-input__inner {
        height: 32px;
        font-size: 14px;
      }
      p {
        font-size: 12px;
        color: #999;
        // margin-top: -15px;
        line-height: 15px;
        padding-left: 15px;
      }
      /deep/ .el-form-item__error {
        padding-left: 15px;
        padding-top: 1px;
      }
      /deep/ .el-form-item__content {
        width: 65%;
      }
    }
  }
}
.selection-school {
  .list-bd {
    margin-top: 5px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    span {
      //   width: 152px;
      font-size: 16px;
      color: #666;
    }
  }
}
.list-hd {
  position: relative;
  h3 {
    font-size: 16px !important;
    color: #222;
    background: none;
    padding-left: 10px;
  }
  &::before {
    content: "";
    width: 3px;
    height: 17px;
    background-color: #0195ff;
    position: absolute;
    top: 5px;
    left: 0;
  }
}
.reporting-btn {
  padding: 26px 0 10px;
  text-align: center;
  // margin-top: 40px;
  .el-button {
    border-color: #0195ff;
    color: #0195ff;
    &:last-child {
      background-color: #0195ff;
      color: #fff;
    }
  }
}
</style>
<style lang="scss">
.selection-main {
  .el-checkbox__input.is-checked + .el-checkbox__label {
    color: #333;
  }
}
.selection-table {
  .el-table tbody tr {
    cursor: pointer;
  }
}
</style>
